﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>ajax</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			ul,li{
				list-style:none;
			}
			#list{
				width:500px;
				height:500px;
				border:5px solid #ccc;
				margin:100px auto;
			}
			ul{
				height:400px;
			}
			li{
				height:30px;
				margin:5px 0;
			}
			.msg_left{
				text-align:left;
			}
			.msg_right{
				text-align:right;
			}
			input{
				width:450px;
				height:95px;
			}
		</style>
	</head>
	<body>
		<div id="list">
			<ul id="dialog">
				<li class="msg_left"><li>
				<li class="msg_right"><li>
			</ul>
			<input id="txt" type="text"></input>
			<button id="btn">发送</button>
		</div>
		
	</body>
<script type="text/javascript">
	var txt=document.getElementById("txt");
	var sendbtn=document.getElementById("btn");
	var oUl=document.getElementById("dialog");
	var username=window.prompt("请输入用户名");
	var ipfrom=window.prompt("请输入你的ip地址ss");
	sendbtn.onclick=function(){
		txt.value="";
		var req=new XMLHttpRequest();
		req.open("get","http://10.9.163.6/1642/day23/onlinechat.php?username="+username+"content="+txt.value,true);
		req.send();
	}
	setInterval(function(){
		var res=new XMLHttpRequest();
		res.open("get","http://10.9.163.6/1642/day23/onlinechat.php",true);
		res.onreadystatechange=function(){
			var li=document.createElement("li");
			oUl.appendchild(li);
			if(ipfrom=="10.9.163.6"){
				li.className="msg_right";
			}else{
				li.className="msg_left";
			}
			li.innerHTML=json.name+json.content;
			li.scrollIntoView();
		}
	},4000)
</script>
</html>

















